<template>
  <div class="bidding_styl">
    <img class="img_styl" src="@/assets/images/back_bidding.png" alt="" srcset="">
    <div class="detail_content">
      <div class="detail_top">
        <div class="tag_styl">竞拍</div>
        <div class="bidding_name">{{ rowData.name }}</div>
      </div>
      <div class="detail_bottom">
        <img class="img_styl1" :src="imagePreviewUrl + rowData.imgUrl[0]" v-if="rowData.imgUrl && rowData.imgUrl.length"
          alt="" srcset="">
        <img class="img_styl1" src="@/assets/images/bidding_detail.png" v-else alt="" srcset="">

        <div class="bottom_right">
          <div class="detail_item">
            <div class="item_label">开始时间</div>
            <div class="item_content">{{ rowData.startTime }}</div>
          </div>
          <div class="detail_item">
            <div class="item_label">起拍价</div>
            <div class="price_styl">{{ rowData.startAmount }}<span class="unit_styl">元</span></div>
          </div>
          <div class="bidding_info">
            <div class="info_left">
              <div class="item_info">
                <div class="item_label">销售公司</div>
                <div class="info_content">{{ rowData.companyName }}</div>
              </div>
              <div class="item_info">
                <div class="item_label">规格竞拍量</div>
                <div class="info_content">{{ rowData.showZnum == 1 ? rowData.num : "******" }} 吨</div>
              </div>
              <div class="item_info" v-if="rowData.biddingMode != 1">
                <div class="item_label">最小起拍量</div>
                <div class="info_content">{{ rowData.minStartNum }} 吨</div>
              </div>
              <div class="item_info">
                <div class="item_label">起拍时间</div>
                <div class="info_content">{{ rowData.startTime }}</div>
              </div>
            </div>
            <Lines class="line_styl" backColor="#D8D8D8" heightNum="60px"></Lines>
            <div class="info_left">
              <div class="item_info">
                <div class="item_label">规格名称</div>
                <div class="info_content">{{ rowData.valueAttrName }}</div>
              </div>
              <div class="item_info">
                <div class="item_label">可报价次数</div>
                <div class="info_content">{{ rowData.maxOfferNum }} 次</div>
              </div>
              <div class="item_info" v-if="rowData.biddingMode != 1">
                <div class="item_label">最大竞拍量</div>
                <div class="info_content">{{ rowData.maxEndNum }} 吨</div>
              </div>
              <div class="item_info">
                <div class="item_label">结束时间</div>
                <div class="info_content">{{ rowData.endTime }}</div>
              </div>
            </div>
            <Lines class="line_styl" backColor="#D8D8D8" heightNum="60px"></Lines>
            <div class="info_left">
              <div class="item_info">
                <div class="item_label">竞拍类型</div>
                <div class="bidding_tyl">{{ rowData.biddingMode == 1 ? '整体竞拍' : '拆分竞拍' }}</div>
              </div>
              <div class="item_info">
                <div class="item_label">起拍价</div>
                <div class="price_num">¥ {{ rowData.startAmount }}</div>
              </div>
              <div class="item_info">
                <div class="item_label">加价幅度</div>
                <div class="price_num">¥ {{ rowData.markupAmount }}</div>
              </div>
              <div class="item_info" v-if="rowData.biddingMode != 1">
                <div class="item_label">加量幅度</div>
                <div class="bidding_tyl">{{ rowData.markupNum }} 吨 </div>
              </div>
            </div>
          </div>
          <!-- <div class="info_tip">
            <div class="tip_label">当前信用额度</div>
            <div class="tip_name">200.00元</div>
          </div> -->
          <div class="info_tip">
            <div class="tip_label"><span class="import_styl">*</span>请保证信用额度大于<span class="import_styl1">{{
              rowData.bondAmount }}</span>元, 即可参与出价!
            </div>
          </div>
          <div class="input_styl" v-if="rowData.biddingMode != 1">
            <div class="num_styl">数量</div>
            <span class="buy_styl">
              <template v-if="rowData.markupNum == 0">
                <Input type="text" v-model="outPrice" placeholder="请输入报价数量" style="width: 214px;" />
                <div class="unit_styl"> =
                  <div class="import_styl1">{{ outPrice }} 吨</div>
                </div>
              </template>

              <template v-if="rowData.markupNum !== 0">
                <InputNumber v-model="offerInfo.order" :min="0" controls-outside></InputNumber>
                <div class="unit_styl">
                  <div class="unit_num">* {{ rowData.markupNum }} 吨</div> +
                  <div class="unit_num">{{ lastNum || rowData.minStartNum }} 吨</div> =
                  <div class="import_styl1">
                    {{ submitNum }}
                    吨
                  </div>
                </div>
              </template>
            </span>
          </div>
          <div class="input_styl">
            <div class="num_styl">出价</div>
            <span class="buy_styl">
              <InputNumber v-model="offerInfo.price" :min="0" controls-outside></InputNumber>
              <div class="unit_styl">
                <div class="unit_num">* {{ rowData.markupAmount }} 元</div> +
                <div class="unit_num">{{ lastPrice || rowData.startAmount }} 元</div> =
                <div class="import_styl1">
                  {{ submitPrice }}
                  元
                </div>
              </div>
            </span>
          </div>

          <div v-if="rowData.status == 1">
            <div class="btn_signUp_status" v-if="rowData.baomingStatus == 1">已报名</div>
            <div class="btn_signUp" @click="signUpFun()" v-else>报名</div>
          </div>
          <div v-if="rowData.status == 2">
            <div v-if="rowData.baomingStatus == 1" class="out_styl">
              <div class="btn_offer" @click="outPriceFun()">出价<Spin size="large" fix v-if="btnLoading"></Spin>
              </div>
              <div class="effective_styl" v-if="rowData.biddingMode != 1">
                <div class="effective_title">有效量: </div>
                <div class="effective_num">{{ yjdsl }} 吨</div>
              </div>
            </div>
            <div class="btn_signUp" v-else @click="signUpFun()">报名</div>
          </div>
          <div v-if="rowData.status == 3">
            <div v-if="rowData.baomingStatus == 1" class="btn_status">{{ titleContent }}</div>
            <div v-else class="btn_end">活动已结束</div>
          </div>
          <div v-if="rowData.status == 4">
            <div v-if="rowData.baomingStatus == 1" class="btn_status">{{ titleContent }}</div>
            <div v-else class="btn_end">活动已结束</div>
          </div>
        </div>
      </div>
      <div class="bidding_detail">
        <div class="bidding_title">
          <div @click="chooseIndex = 0" class="title_name" :class="[chooseIndex == 0 ? 'title_nameCopy' : '']">竞拍记录</div>
          <div @click="chooseIndex = 1" class="title_name" :class="[chooseIndex == 1 ? 'title_nameCopy' : '']">竞拍介绍</div>

        </div>
        <div class="detail_styl" v-if="chooseIndex == 1">
          <div class="detail_content" v-html="content"></div>
        </div>
        <div class="detail_msg" v-if="chooseIndex == 0">
          <div class="message_styl" v-for="(item, index) in bjList" :key="index">
            <Icons v-if="item.content.includes('用户')" font="#icon-yh1" class="icon-yh1" fontSize="26px"></Icons>
            <Icons v-if="item.content.includes('管理员')" font="#icon-xt" class="icon-xt" fontSize="26px"></Icons>
            <div class="tag_styl">{{ item.content.includes('用户') ? '【用户消息】' : '【管理员消息】' }}</div>
            <div class="user_info" v-if="item.content.includes('用户')">
              <!-- <div class="user_name">{{ rowData.showCompany == 1 ? item.fromUserName : "******" }}</div>
              <div class="price_offer">出价{{ rowData.showAmount == 1 ? item.price : "******" }}元，{{ rowData.showNum == 1 ?
                item.num : "******" }}吨</div> -->
              <div class="user_name">{{ item.fromUserName }}</div>
              <div class="price_offer">出价{{ item.price }}元，{{
                item.num }}吨</div>
            </div>
            <div v-if="item.content.includes('管理员')">
              {{ item.content }}
            </div>
            <div class="create_time" style="margin-left: 20px;"> {{ item.date }}</div>
          </div>
        </div>
      </div>
      <Spin size="large" fix v-if="spinShow"></Spin>
      <!-- 竞拍报名 -->
      <BiddingSignUp ref="BiddingSignUp" @ok="getActivityInfo"></BiddingSignUp>
      <!-- 竞拍协议 -->
      <BiddingAgreement ref="BiddingAgreement" @success="toSignUpFun" :content="rowData.tellContent"></BiddingAgreement>
    </div>
  </div>
</template>

<script>
import webSocketMixins from "@/mixins/webSocketMixins";
import BiddingSignUp from "./Bidding-SignUp.vue";
import BiddingAgreement from "./Bidding-Agreement.vue";
import localData from "../../../localData";

export default {
  components: { BiddingSignUp, BiddingAgreement },
  mixins: [webSocketMixins],
  data() {
    return {
      lastPrice: 0, //上次报价
      lastNum: 0, //上次报价数量
      yjdsl: 0,
      bjList: [],
      btnLoading: false,
      titleContent: "",
      rowData: {},
      outPrice: 0,
      offerInfo: {
        order: 0,
        price: 0
      },
      effectiveSize: {
        amount: 0,
        num: 0
      },
      editId: "",
      content:
        "\n0号车用柴油(VI)物料价格为 7910\n92号车用汽油(VIB)物料价格为 8830\n95号车用汽油(VIB)物料价格为 8930\n70#沥青物料价格为 3770\n石油混合二甲苯物料价格为 8400\n石油混合二甲苯物料价格为 7900\n液化石油气物料价格为 5700\n液化气物料价格为 5330\n燃料油物料价格为 6650\n苯物料价格为 8780\n石油焦物料价格为 1500\n燃料油物料价格为 5800\n燃料油物料价格为 6200\n燃料油物料价格为 7400\n0号车用柴油(VI)物料价格为 7450",
      chooseIndex: 0,
      imagePreviewUrl: localData.API_URl + "/guns",
      spinShow: false
    };
  },
  mounted() {
    this.editId = this.$route.query.id;
    this.getActivityInfo();
    this.getNowPrice();
  },
  computed: {
    // 提交总量
    submitNum() {
      return (
        this.offerInfo.order * this.rowData.markupNum +
        (this.lastNum || this.rowData.minStartNum)
      );
    },
    // 提交总金额
    submitPrice() {
      return (
        this.offerInfo.price * this.rowData.markupAmount +
        (this.lastPrice || this.rowData.startAmount)
      );
    }
  },
  methods: {
    // 竞拍出价
    outPriceFun() {
      this.btnLoading = true;
      let data = {};
      if (this.rowData.biddingMode == 1) {
        //整体竞价
        data = {
          biddingId: this.rowData.id,
          amount:
            (this.effectiveSize.amount
              ? this.effectiveSize.amount
              : this.rowData.startAmount) +
            this.offerInfo.price * this.rowData.markupAmount,
          num: this.rowData.num
        };
      } else {
        //拆分竞价
        data = {
          biddingId: this.rowData.id,
          amount: this.submitPrice,
          // (this.effectiveSize.amount
          //   ? this.effectiveSize.amount
          //   : this.rowData.startAmount) +
          // this.offerInfo.price * this.rowData.markupAmount,
          num: this.submitNum
          // this.rowData.markupNum == 0
          //   ? this.outPrice
          //   : this.effectiveSize.num +
          //     this.offerInfo.order * this.rowData.markupNum
        };
      }
      this.httpPost(this.API.API_activityAdd, data)
        .then((res) => {
          this.offerInfo = {
            order: 0,
            price: 0
          };
          this.$Message.success("报价成功!");
          this.sendMessage({
            ...data,
            type: "bj",
            userId: this.rowData.id,
            realName: this.rowData.realName
          });
          this.getNowPrice();
          this.btnLoading = false;
        })
        .catch((err) => {
          this.btnLoading = false;
          console.log("接口报错：", err);
        });
    },
    toSignUpFun() {
      this.$refs.BiddingSignUp.openFun(this.rowData);
    },
    signUpFun() {
      this.$refs.BiddingAgreement.openFun(this.rowData);
    },
    // 获取竞拍详情
    getActivityInfo() {
      this.spinShow = true;
      this.httpGet(this.API.API_activityInfo, { id: this.editId })
        .then((res) => {
          this.rowData = {
            ...res.data.bidding,
            baomingStatus: res.data.baomingcount,

          };
          this.content = res.data.bidding.msg
          if (this.rowData.status == 3 || this.rowData.status == 4) {
            this.getresultone();
          }
          // websocket启动
          this.createWebSocket();
          this.spinShow = false;
        })
        .catch((err) => {
          this.spinShow = false;
          console.log("接口报错：", err);
        });
    },
    // 查询是否中标
    getresultone() {
      this.httpGet(this.API.API_getresultone, { biddingId: this.editId })
        .then((res) => {
          this.titleContent = res.data;
        })
        .catch((err) => {
          this.spinShow = false;
          console.log("接口报错：", err);
        });
    },
    // 竞拍价格
    getNowPrice() {
      this.httpGet(this.API.API_selectnewinfo, { id: this.editId })
        .then((res) => {
          this.effectiveSize = res.data;
          this.lastPrice = res.data.amount || 0;
          this.lastNum = res.data.num || 0;
        })
        .catch((err) => {
          console.error(err);
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.hellow_tag(@wid: 160px, @hei: 36px, @rad: 5px, @bk: #ffffff, @bor: #dcdee2, @col: #515a6e) {
  width: @wid;
  height: @hei;
  line-height: @hei;
  text-align: center;
  border: 1px solid @bor;
  color: @col;
  border-radius: @rad;
  background-color: @bk;
}

.bidding_styl {
  width: 100%;
  min-height: 500px;
  padding-bottom: 150px;
  background-color: #f3f3f3;

  img {
    width: 100%;
  }

  .detail_content {
    width: 1185px;
    padding: 26px 28px;
    margin: 5px auto 0 auto;
    background-color: #ffffff;
    position: relative;

    .import_styl1 {
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #c21f3a;
    }

    .detail_top {
      .flex-x(flex-start);

      .tag_styl {
        padding: 4px 10px;
        margin-right: 10px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #6e7fa2;
      }

      .bidding_name {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .detail_bottom {
      .flex-x(flex-start);
      margin-top: 10px;

      .img_styl1 {
        width: 288px;
        height: 360px;
        margin-right: 38px;
      }

      .bottom_right {
        flex-grow: 1;

        .detail_item {
          .flex-x(flex-start);

          .item_label {
            width: 70px;
            text-align: left;
          }

          .item_content {
            font-size: 24px;
            font-weight: bold;
          }

          .price_styl {
            font-size: 24px;
            font-weight: bold;
            color: #c21f3a;

            .unit_styl {
              font-size: 12px;
            }
          }
        }

        .bidding_info {
          .flex-x();
          padding: 18px 24px 12px 24px;
          font-size: 12px;
          background-color: #f6f6f6;

          .info_left {
            height: 100%;

            .item_info {
              .flex-x(flex-start);
              margin-bottom: 4px;

              .bidding_tyl {
                color: @themeColor;
              }

              .item_label {
                width: 90px;
                text-align: left;
                color: #666666;
              }

              .price_num {
                color: #c21f3a;
              }
            }
          }
        }

        .info_tip {
          .flex-x(flex-start);
          margin: 10px;
          font-size: 12px;

          .tip_label {
            margin-right: 10px;
            color: #666666;

            .import_styl {
              color: #c21f3a;
            }
          }

          .tip_name {
            color: #c21f3a;
          }
        }

        .input_styl {
          .flex-x(flex-start);
          margin-bottom: 10px;
          font-size: 13px;

          .num_styl {
            margin-right: 20px;
          }

          .buy_styl {
            .flex-x(flex-start);

            .unit_styl {
              .flex-x(flex-start);
              width: 300px;
              font-size: 13px;
              margin-left: 10px;

              .unit_num {
                width: 70px;
              }
            }
          }
        }

        .out_styl {
          .flex-x(flex-start);

          .effective_styl {
            .flex-x(flex-start);
            margin-left: 50px;

            .effective_title {
              font-size: 16px;
              font-weight: bold;
            }

            .effective_num {
              margin-left: 10px;
              font-size: 16px;
              font-weight: bold;
              color: #c21f3a;
            }
          }
        }

        .btn_offer {
          .solid-btn(204px, 44px, 4px, #08e74b);
          position: relative;
          margin-top: 6px;
        }

        .btn_error {
          .solid-btn(204px, 44px, 4px, #c21f3a);
          position: relative;
          margin-top: 6px;
        }

        .btn_end {
          .hellow_tag(204px, 44px, 4px, transparent, #b4b4b4, #b4b4b4);
          position: relative;
          margin-top: 6px;
        }

        .btn_primary {
          .solid-btn(204px, 44px, 4px, @themeColor);
          margin-top: 6px;
        }

        .btn_status {
          .hellow_tag(204px, 44px, 4px, transparent, #c21f3a, #c21f3a);
          margin-top: 6px;
        }

        .btn_signUp {
          .solid-btn(204px, 44px, 4px, @themeColor);
          margin-top: 6px;
        }

        .btn_signUp_status {
          .hellow_tag(204px, 44px, 4px, transparent, @themeColor, @themeColor)
        }
      }
    }

    .bidding_detail {
      margin: 30px auto 0 auto;
      background-color: #ffffff;

      .bidding_title {
        .flex-x(flex-start);
        background-color: #f5f6f7;

        .title_name {
          width: 120px;
          height: 40px;
          line-height: 44px;
          cursor: pointer;
        }

        .title_nameCopy {
          color: #ffffff;
          background-color: @themeColor;
        }
      }

      .detail_styl {
        min-height: 400px;

        .detail_content {
          padding: 20px 16px;
          text-align: left;
        }
      }

      .detail_msg {
        min-height: 500px;
        height: 400px;
        margin-top: 20px;
        padding: 10px 20px;
        overflow-y: auto;
        background-color: #f9f9f9;

        .message_styl {
          .flex-x(flex-start);
          margin-top: 20px;

          .user_info {
            .flex-x();
          }

          .tag_styl {
            margin-left: 6px;
            font-size: 16px;
            font-weight: bold;
          }

          .price_offer {
            margin: 0 30px;
          }
        }
      }
    }
  }
}
</style>
